<template>
<div>
<el-input
  placeholder="输入关键字进行过滤"
  disabled
  v-model="filterText">
</el-input>

<el-tree
  class="filter-tree"
  :data="roleAuthlist"
  :props="defaultProps"
   node-key="id"
  default-expand-all
  show-checkbox
  ref="treeRef">
</el-tree>
<el-button type="primary" size="small" @click="onSave">保存</el-button>
<el-button type="primary" size="small" @click="oncancel">取消</el-button>

</div>
</template>

<script >
import roleApi from '@/api/acl/role'
import permissionApi from '@/api/acl/permission'  //api
import { Message } from 'element-ui';
import { cloneDeep } from 'lodash'

  export default {


    data() {
      return {
        filterText: '',  //输入框头部
     
        defaultProps: {
          children: 'children',  //规定节点哪一个数据作为展开的数据
          label: 'name' //label 是展开的文本，从数据中哪个字段去拿名称
        },
        roleAuthlist:[],  //获取树形列表
        allCheckedVal:[], // 全选的id
        someCheckedVal:[],//  半选的id
          checkAll : [] // 全部的id
      };
    },


    

    methods: {
      filterNode(value, data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      },

      
        //------------------保存---------------//
       async onSave(){
            //获取所有选中的id
this.allCheckedVal=this.$refs.treeRef?.getCheckedKeys()
 this.someCheckedVal=this.$refs.treeRef?.getHalfCheckedKeys()   
this.checkAll=this.allCheckedVal.concat( this.someCheckedVal).toString()
console.log(this.checkAll)

        try {
            const {id}=this.$route.params.id
          
            await roleApi.assignRoleApi(id,this.checkAll)

         Message.success('分配权限成功')
          this.$router.push('/acl/role') // 跳转

        } catch (error) {
             Message.error('保存失败,请重试')
        }

        },

        //取消
        oncancel(){
  this.$router.push('/acl/role')
          Message.warning('取消分配')
        },
    //----------------数据回显-----------//
    //初始化
    //  init(){
    //   const roleId=$route.params.id
    //   getPermissions(roleId)
    // },

  
    
    // // 获取指定角色的列表
    // getPermissions(roleId){
      
    //     this.roleAuthlist=  result.children
    //     console.log(result.children);
    //     allCheckedVal=getCheckedIds(roleAuthlist)
    //   treeRef.setCheckedKeys(roleAuthlist)
    //   })
    // },

    // 获取列表
      async getroleAuthlist(){
        try {
               const {id} =this.$route.params.id  //获取到路由中的id
         this.filterText=this.$route.params.roleName  //获取到路由里携带的名字并且，赋值
        const result=await permissionApi.toAssign(id)
        this.roleAuthlist=result.data.children
        console.log(result)
        console.log(this.roleAuthlist)
        } catch (error) {
            console.log("更新一个权限项失败",error)
        }
     
        },


      //得到所有选中的id列表
        getCheckedIds(auths,initArr){
        auths.forEach(item => {
          if(item.select && item.level===4){
            initArr.push(item.id)
          }else if(item.children){
            getCheckedIds(item.children,initArr)
          }
        });
        return initArr
      }




    },
      mounted() {
       
        this.getroleAuthlist()
  
  },
  };

</script>

<style scoped>

</style>